<template>
  <el-form ref="formData" :model="formData" :rules="rules">
    <el-form-item label="原密码" prop="oldPassword">
      <el-input v-model.trim="formData.oldPassword" show-password />
    </el-form-item>

    <el-form-item label="新密码" prop="newPassword">
      <el-input v-model.trim="formData.newPassword" show-password />
    </el-form-item>

    <el-form-item label="再次输入新密码" prop="againPassword">
      <el-input v-model.trim="formData.againPassword" show-password />
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="submit" :loading="loading">更新</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
  import {
    updatePwd
  } from '@/api/system/user'
  import {
    JSEncrypt
  } from 'jsencrypt'
  export default {
    props: {
      user: {
        type: Object,
        default: () => ({})
      }
    },
    watch: {
      user: {
        handler: function(value) {
          this.formData.id = value.id || '';
        },
        immediate: true,
        deep: false
      }
    },
    data() {
      return {
        visible: false,
        title: '',
        loading: false,
        publicKey: 'MFwwDQYJKoZIhvcNAQEBBQADSwAwSAJBAKyiOmdLfcrpepp8sbbFFDJ44NMEJUIAG9vTcD9S9YY9+H8INT804Y4W/egfdBdpm2AMbCs+rhWkETLjNqKJYdcCAwEAAQ==',
        formData: {
          id: '',
          oldPassword: '',
          newPassword: '',
          againPassword: '',
        },
        rules: {
          oldPassword: [{
            required: true,
            message: '请输入原密码.',
            trigger: 'blur'
          }],
          newPassword: [{
            required: true,
            message: '请输入新密码.',
            trigger: 'blur'
          }],
          againPassword: [{
            required: true,
            message: '请再次输入新密码.',
            trigger: 'blur'
          }],
        }
      }
    },
    methods: {
      submit() {

        this.$confirm('更新密码后将退出当前登录，确认更新吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.loading = true
          this.$refs.formData.validate((valid) => {
            if (valid) {
              this.loading = true
              updatePwd({
                  id: this.encryptedData(this.formData.id),
                  newPassword: this.encryptedData(this.formData.newPassword),
                  oldPassword: this.encryptedData(this.formData.oldPassword)
                }).then(rsp => {
                  // this.$message({
                  //   type: 'success',
                  //   message: rsp.message
                  // })
                  this.logout();
                  this.$emit('change', 'Login')
                }).catch(err => {
                  console.log(err);
                })
                .finally(() => {
                  this.loading = false
                })
            }
          })
        })
      },
      //  加密
      encryptedData(data) {
        // 新建JSEncrypt对象
        let encryptor = new JSEncrypt();
        // 设置公钥
        encryptor.setPublicKey(this.publicKey);
        // 加密数据
        return encryptor.encrypt(data);
      },
      async logout() {
        await this.$store.dispatch('user/logout')
        this.$router.push(`/login?redirect=${this.$route.fullPath}`)
      }
    }
  }
</script>
